<template>
  <div id="chart"></div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import { reactive, getCurrentInstance } from "vue";
import { EChartsOption, init } from "echarts";
var option: EChartsOption;
const { $axios } = (getCurrentInstance() as any).appContext.config
  .globalProperties;

// x轴变，y轴不变是个value值，series 是个数组
const charts = reactive({
  legend: {},
  series: [],
  xAxis: [],
  yAxis: [],
});
onMounted(() => {
  // 获取dom，断言HTMLElement类型，否则会报错
  const chartEle: HTMLElement = document.getElementById("chart") as HTMLElement;
  const chart = init(chartEle);

  $axios("/api/reports/type/1", "GET", {
    headers: {
      Authorization: localStorage.getItem("token"),
    },
  }).then((data: any) => {
    console.log(data);
    charts.legend = data.data.data.legend;
    console.log(charts.legend);
    const option = {
      title: {
        text: "数据统计",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      legend: {
        data: data.data.data.legend.data,
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: data.data.data.xAxis[0].data,
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: data.data.data.series,
    };
    // 绘制图标，必须有才有图
    option && chart.setOption(option);
  });
});
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  // margin-top: 60px;
}

#chart {
  width: 600px;
  height: 400px;
}
</style>
